<template>
  <div>

    <!-- 我的学习任务 -->
    <div class="sec-video-label">学习任务</div>
    <!-- 回到顶部 -->
    <el-backtop></el-backtop>
    <el-divider></el-divider>
    <el-row>
      <el-col
        :span="5"
        v-for="(video, index) in taskVideos"
        :key="index"
        :offset="index % 4 == 0 ? 0 : 1"
      >
        <el-card
          :body-style="{ padding: '0px' }"
          shadow="hover"
        >
          <img
            @click="playVideo(video)"
            :src="video.videoImg"
            class="image"
          >
          <div
            style="padding: 14px;"
            @click="videoDesc(video)"
          >
            <span>{{ video.videoName }}</span>
            <div class="bottom clearfix">
              <span
                v-if="video.videoDesc && video.videoDesc.length > 20"
                class="sec-video-desc"
              >{{ video.videoDesc.slice(0, 16) }}...</span>
              <span
                v-else
                class="sec-video-desc"
              >{{ video.videoDesc }}</span>
              <!-- <time class="time">{{ currentDate }}</time> -->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 热门推荐 -->
    <div class="sec-video-label">热门推荐</div>
    <el-divider></el-divider>
    <el-row>
      <el-col
        :span="5"
        v-for="(video, index) in hotVideos"
        :key="index"
        :offset="index % 4 == 0 ? 0 : 1"
      >
        <el-card
          :body-style="{ padding: '0px' }"
          shadow="hover"
        >
          <img
            @click="playVideo(video)"
            :src="video.videoImg"
            class="image"
          >
          <div
            style="padding: 14px;"
            @click="videoDesc(video)"
          >
            <span>{{ video.videoName }}</span>
            <div class="bottom clearfix">
              <span
                v-if="video.videoDesc && video.videoDesc.length > 20"
                class="sec-video-desc"
              >{{ video.videoDesc.slice(0, 16) }}...</span>
              <span
                v-else
                class="sec-video-desc"
              >{{ video.videoDesc }}</span>
              <!-- <time class="time">{{ currentDate }}</time> -->
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <div class="sec-video-label" @click="showAllVideo">全部视频 ></div>
  </div>
</template>
<script>
import { selfTaskVideo, queryHotVideos } from '@/api/system/system.js'
export default {
  data() {
    return {
      currentDate: new Date(),
      quaryParams: {
        videoId: '',
        videoName: '',
        videoType: ''
      },
      hotVideos: [],
      taskVideos: [],
    }
  },
  async mounted(){
    const { data: res } = await selfTaskVideo()
    if (res.code === 200) {
      this.taskVideos = res.data.videos
    }
    const {data: hotRes } = await queryHotVideos(10)
    if (hotRes.code === 200) {
      this.hotVideos = hotRes.data.videos
    }
  },
  methods: {
    playVideo(video) {
      this.$store.dispatch('current_video', JSON.stringify(video))
      this.$router.push("/videoDetail")
      this.$message.success("正在播放" + video.videoName)
    },
    videoDesc(video) {
      this.$message.success("正在跳转视频详情页面" + video.name)
    },
    showAllVideo() {
      this.$router.push('/allVideo')
    },
  },
};
</script>

<style lang="css" scoped>
.el-card {
  width: 240px;
  height: 300px;
  margin-bottom: 20px;
}
.sec-video-desc {
  color: #ccc;
  font-size: 12px;
}
.sec-video-label {
  color: black;
  font-size: 20px;
  font-weight: 700;
}
.sec-video-type {
  width: 140px;
  height: 80px;
}
</style>